<template>
  <div class="table-page">
    <div class="header">
      <h1>桌号信息</h1>
    </div>
    
    <div class="table-info">
      <p >您选择的桌号是：<span class="table-number">03</span></p>

      <!-- <p v-if="tableNumber">您选择的桌号是：<span class="table-number">{{ tableNumber }}</span></p> -->
      <!-- <p v-else>您未选择桌号，将不需要桌面服务</p> -->
    </div>
    
    <div class="actions">
      <button @click="next" class="next-btn">下一步</button>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useOrderStore } from '../store/orderStore'

export default {
  name: 'TablePage',
  setup() {
    const router = useRouter()
    const orderStore = useOrderStore()
    
    const tableNumber = computed(() => orderStore.tableNumber)
    
    const next = () => {
      router.push('/people')
    }
    
    return {
      tableNumber,
      next
    }
  }
}
</script>

<style scoped>
.table-page {
  padding: 20px;
  text-align: center;
}

.header h1 {
  color: #333;
  margin-bottom: 30px;
}

.table-info {
  margin: 40px 0;
  padding: 20px;
  background-color: #f8f8f8;
  border-radius: 8px;
}

.table-number {
  font-weight: bold;
  color: #42b983;
}

.actions {
  margin-top: 40px;
}

.next-btn {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 12px 40px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.next-btn:hover {
  background-color: #359c6d;
}
</style>